<template>
    <div class="introduction">
        <div class="operate">
            <el-button type="primary" @click="addIntroduction">新建公告</el-button>
            <div class="search">
                <el-input input-style="width: 70%;margin-right: 10px;" v-model="searchName" placeholder="请输入Title查询" />
                <el-button type="primary" @click="search">查询</el-button> 
            </div>   
        </div>
        <div class="content">
            <el-collapse v-model="activeName" v-loading="loading" accordion>
                <el-collapse-item v-for="(item,index) in tableData" :key="index" :name="item.id">
                    <template #title>
                        <span style="font-size: 16px;margin-left: 16px;font-weight: bold;">{{ item.title }}</span>
                    </template>
                    <div class="nr">
                        {{ item.content }}
                    </div>
                    <div>
                        <el-icon v-if="userMessage.Id==item.uid" @click="deletegl(item)" :size="16"><Delete /></el-icon>
                        <span style="float: right;margin-right: 15px;">{{ item.createTime }}</span>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <el-drawer
            v-model="drawer"
            direction="btt"
            size="40%"
            title="新建攻略">
            <div>
                <el-form :model="formData" label-width="60px">
                    <el-form-item label="标题">
                        <el-input v-model="formData.title" />
                    </el-form-item>
                    <el-form-item label="内容">
                        <el-input v-model="formData.content" type="textarea" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button @click="drawer = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import utils from '@/util/utils'

import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { ElMessageBox,ElMessage  } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
export default defineComponent({
    data(){
        return{
            activeName:'',
            tableData:[
            {
                    "id":1,
                    "uid":1,
                    "title":'宠物怎么吃饭',
                    "content":'宠物怎么吃饭宠物怎么吃饭宠物怎么吃饭宠物怎么吃饭宠物怎么吃饭宠物怎么吃饭宠物怎么吃饭宠物怎么吃饭宠物怎么吃饭宠物怎么吃饭',
                    "createTime":'2020-01-30'
                }
            ],
            userMessage:null,
            drawer:false,
            searchName:'',
            loading:true,
            pagination:{
                start:0,
                end:10,
                current:1,
                total:100
            },
            formData:{
                "id":1,
                "uid":1,
                "title":'',
                "content":''
            }
        }
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    created () {
        this.userMessage = this.store.state.UserMessage;
        this.loadData()
    },
    methods:{
        loadData(){
            let self = this;
            let row = this.pageData();
            row.name = null;
            self.$http.post(`${self.baseUrl}/introduction/selectName`,row).then(res=>{
                self.tableData = res.data.document;
                self.loading = false;
            })
        },
        addIntroduction(){
            this.formData = this.initial();
            this.drawer = true;
        },
        onSubmit(){
            if(this.formData.Content==''||this.formData.Title==''){
                ElMessage({
                    message: '请输入标题或内容',
                    type: 'warning'
                })
                return;
            }
            let self = this;
            if(self.UserMessage != null) this.formData.Uid = this.userMessage.id;
            self.$http.post(`${self.baseUrl}/introduction/AddIntroduction`,self.formData).then(res=>{
                if(res.data==1){
                    ElMessage({
                        message: '添加成功',
                        type: 'success'
                    })
                    utils.PublicationInc(self.baseUrl);
                    self.drawer = false;
                    self.loadData();
                }
            })
        },
        search(){
            let self = this;
            let row = self.pageData();
            row.name = self.searchName;
            row.current = 1;
            self.$http.post(`${self.baseUrl}/introduction/selectName`,row).then(res=>{
                self.tableData = res.data.document;
            }) 
        },   
        deletegl(msg){
            let self = this;
            ElMessageBox.confirm('确定要删除这条攻略吗？','警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    self.$http.get(`${self.baseUrl}/introduction/deleteIntroduction?id=${msg.id}`).then(res=>{
                        if(res.data!=0){
                            ElMessage({
                                type: 'success',
                                message: '删除成功',
                            })
                            self.loadData();
                        }
                    })

                }).catch(() => {})
        },  
        pageData(){
            let row = {};
            row.end = this.pagination.end;
            row.current = this.pagination.current;
            return row;
        },
        initial(){
            return {
                "id":1,
                "uid":1,
                "title":'',
                "content":''
            }
        }
    }
})
</script>
<style scoped>
    .introduction{
        height: 100%;
    }
    .el-icon{
        float: right;
        margin-top: 3px;
        margin-right: 11px;
        cursor: pointer;
        color: #F56C6C;
    }
    .nr{
        font-size: 15px;
        text-indent: 2em;
        color: #666;
    }
    .search{
        float: right;
    }
    .content{
        margin-top: 16px;
        width: 100%;
        height: calc(100% - 38px);
        overflow: auto;
    }
</style>
